<!DOCTYPE html>
<html>
  <head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/index.css">
    <link type="text/css" href="../css/phone.css" rel="stylesheet">
    <link type="text/css" href="../module/modulestyle.css" rel="stylesheet">
    <script src="js/flexible.js"></script>
    <style>
      .page {
        height: 100%;
      }
      .page_content {
        height: calc(100% - 1.5625rem);
        overflow-y: scroll;
      }
      footer {
        height: 1.5625rem;
        background: #fff;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid rgb(221, 221, 221);
      }
      footer div{
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        color: #666;

      }
      footer div i {
        width: 0.75rem;
        height: 0.75rem;
        background-size: cover;
      }
      footer .home i { background-image: url('images/home.png'); }
      footer .classify i { background-image: url('images/classify.png'); }
      footer .car i { background-image: url('images/car.png'); }
      footer .mine i { background-image: url('images/mine.png'); }
      footer .click.home i { background-image: url('images/home_click.png');}
      footer .click.classify i { background-image: url('images/classify_click.png');}
      footer .click.car i { background-image: url('images/car_click.png');}
      footer .click.mine i { background-image: url('images/mine_click.png');}
    </style>
  </head>

  <body>
    <div class="page">
      <div class="page_content">
        <div></div>
      </div>
      <footer>
        <div class="home click">
          <i></i>
          <span>首页</span>
        </div>
        <div class="classify">
          <i></i>
          <span>分类</span>
        </div>
        <div class="car">
          <i></i>
          <span>购物车</span>
        </div>
        <div class="mine">
          <i></i>
          <span>我的</span>
        </div>
      </footer>
    </div>

    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/fastclick.js"></script>
    <!--组件js-->
    <script src="../module/banner/jquery.SuperSlide.2.1.1.js"></script>
    <script src="../module/module.js"></script>
    <script>
      $(function() {
        FastClick.attach(document.body);
      });
      $('footer div').click(function() {
        if ($(this).hasClass('click')) return false;
        $('footer div').removeClass('click')
        loadPage($(this).attr('class'))
      })
      
      // 加载页面
      function loadPage(page) {
        $('.' + page).addClass('click')
        $(".page_content").load('page/' + page + '/index.html', function() {
          if (page == 'home') {
            startBanner();
          }
        });
      }

      loadPage('home')
    </script>
  </body>
</html>
